<template>
    <view class="forgot-container">
        <!-- 背景图 -->
        <image class="bg-image" src="/static/images/icon4.jpeg" mode="aspectFill"></image>
        <view class="overlay"></view>
        
        <view class="header">
            <text class="title">重置密码</text>
            <text class="subtitle">RESET PASSWORD</text>
        </view>
        
        <view class="form">
            <view class="form-item" :class="{ 'active': focusField === 'account' }">
                <text class="icon iconfont icon-user"></text>
                <input 
                    type="text" 
                    v-model.trim="form.account" 
                    placeholder="请输入账号" 
                    @focus="handleFocus('account')"
                    @blur="validateField('account')"
                />
            </view>
            <text class="error-tip" v-if="errors.account">{{ errors.account }}</text>
            
            <view class="form-item" :class="{ 'active': focusField === 'password' }">
                <text class="icon iconfont icon-lock"></text>
                <input 
                    :type="showPassword ? 'text' : 'password'" 
                    v-model="form.password" 
                    placeholder="请输入新密码"
                    @focus="handleFocus('password')"
                    @blur="validateField('password')"
                />
                <text class="icon-btn" @tap="togglePassword">
                    <text class="iconfont" :class="showPassword ? 'icon-eye' : 'icon-eye-close'"></text>
                </text>
            </view>
            <text class="error-tip" v-if="errors.password">{{ errors.password }}</text>

            <button 
                class="submit-btn" 
                @click="handleSubmit"
                :disabled="isLoading || !isFormValid"
                :loading="isLoading"
            >
                {{ isLoading ? '提交中...' : '重置密码' }}
            </button>

            <view class="actions">
                <text class="action-link" @tap="goBack">返回登录</text>
            </view>
        </view>
    </view>
</template>

<script>
import API from '@/api/config.js'

export default {
    data() {
        return {
            form: {
                account: '',
                password: ''
            },
            errors: {
                account: '',
                password: ''
            },
            isLoading: false,
            showPassword: false,
            focusField: ''
        }
    },
    computed: {
        isFormValid() {
            return this.form.account && this.form.password
        }
    },
    methods: {
        handleFocus(field) {
            this.focusField = field
        },
        
        validateField(field) {
            this.focusField = ''
            this.errors[field] = ''
            
            switch(field) {
                case 'account':
                    if (!this.form.account) {
                        this.errors.account = '请输入账号'
                    }
                    break
                    
                case 'password':
                    if (!this.form.password) {
                        this.errors.password = '请输入新密码'
                    } else if (this.form.password.length < 6) {
                        this.errors.password = '密码至少6个字符'
                    }
                    break
            }
            
            return !this.errors[field]
        },
        
        togglePassword() {
            this.showPassword = !this.showPassword
        },
        
        async handleSubmit() {
            if (this.isLoading) return
            
            if (!this.validateField('account') || 
                !this.validateField('password')) {
                return
            }
            
            this.isLoading = true
            console.log('开始提交表单数据:', this.form)
            
            try {
                // 构造请求参数
                const requestData = {
                    account: this.form.account,
                    password: this.form.password,
                    type: 'password' // 添加类型标识，表明是修改密码
                }
                
                console.log('请求URL:', API.USER_UPDATE)
                console.log('请求数据:', requestData)
                
                const res = await uni.request({
                    url: API.USER_UPDATE,
                    method: 'POST',
                    data: requestData,
                    header: {
                        'Content-Type': 'application/json'
                    }
                })
                
                console.log('接口返回数据:', res)
                console.log('状态码:', res.statusCode)
                console.log('响应数据:', res.data)
                
                if (res.statusCode === 200) {
                    if (res.data.code === 200) {
                        console.log('密码重置成功')
                        uni.showToast({
                            title: '密码重置成功',
                            icon: 'success',
                            duration: 1500
                        })
                        
                        setTimeout(() => {
                            uni.redirectTo({
                                url: '/pages/login/login',
                                fail: (err) => {
                                    console.error('页面跳转失败:', err)
                                    uni.showToast({
                                        title: '跳转失败，请手动返回',
                                        icon: 'none'
                                    })
                                }
                            })
                        }, 1500)
                    } else {
                        console.error('业务错误:', res.data.message)
                        // 根据错误信息给出更具体的提示
                        let errorMsg = res.data.message
                        if (errorMsg === '修改错误') {
                            errorMsg = '账号不存在或密码格式不正确'
                        }
                        
                        this.errors.account = errorMsg
                        uni.showToast({
                            title: errorMsg,
                            icon: 'none',
                            duration: 2000
                        })
                    }
                } else {
                    console.error('HTTP错误:', res.statusCode)
                    throw new Error('网络请求失败')
                }
            } catch (err) {
                console.error('捕获到错误:', err)
                uni.showToast({
                    title: '网络错误，请稍后重试',
                    icon: 'none',
                    duration: 2000
                })
            } finally {
                console.log('请求完成')
                this.isLoading = false
            }
        },
        
        goBack() {
            uni.redirectTo({
                url: '/pages/login/login',
                fail: (err) => {
                    console.error('返回登录页失败:', err)
                    uni.showToast({
                        title: '返回失败，请重试',
                        icon: 'none'
                    })
                }
            })
        }
    }
}
</script>

<style scoped>
.forgot-container {
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60rpx 40rpx;
}

.bg-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    z-index: -1;
}

.header {
	display: flex;
	flex-direction: column;
    text-align: center;
    margin-bottom: 80rpx;
    margin-top: 60rpx;
}

.title {
    font-size: 44rpx;
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 16rpx;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.subtitle {
    font-size: 24rpx;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 4rpx;
}

.form {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border-radius: 30rpx;
    padding: 50rpx 40rpx;
    box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.3);
    border: 1rpx solid rgba(255, 255, 255, 0.1);
}

.form-item {
    position: relative;
    margin-bottom: 30rpx;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 16rpx;
    padding: 0 30rpx;
    border: 2rpx solid transparent;
    transition: all 0.3s ease;
}

.form-item.active {
    background: rgba(255, 255, 255, 0.2);
    border-color: #e0b080;
    box-shadow: 0 0 20rpx rgba(224, 176, 128, 0.1);
}

.verify-group {
    display: flex;
    gap: 20rpx;
    margin-bottom: 30rpx;
}

.verify-input {
    flex: 1;
    margin-bottom: 0;
}

.verify-btn {
    width: 200rpx;
    height: 96rpx;
    background: rgba(224, 176, 128, 0.9);
    border-radius: 16rpx;
    color: #1a1a1a;
    font-size: 26rpx;
    font-weight: 500;
    border: none;
}

.verify-btn:disabled {
    opacity: 0.5;
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.6);
}

.form-item .icon {
    font-size: 36rpx;
    color: rgba(255, 255, 255, 0.6);
    margin-right: 20rpx;
}

.form-item.active .icon {
    color: #e0b080;
}

.icon-btn {
    padding: 20rpx;
    color: rgba(255, 255, 255, 0.6);
}

input {
    flex: 1;
    height: 96rpx;
    font-size: 30rpx;
    color: #ffffff;
    background: transparent;
}

input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.error-tip {
    font-size: 24rpx;
    color: #ff6b6b;
    margin: -20rpx 0 20rpx 30rpx;
}

.submit-btn {
    margin-top: 60rpx;
    height: 88rpx;
    background: linear-gradient(135deg, #e0b080, #d4946f);
    border-radius: 44rpx;
    color: #1a1a1a;
    font-size: 30rpx;
    font-weight: 600;
    letter-spacing: 2rpx;
    border: none;
}

.submit-btn:disabled {
    opacity: 0.6;
}

.actions {
    text-align: center;
    margin-top: 40rpx;
}

.action-link {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.6);
    padding: 20rpx;
}
</style> 